import * as React from 'react';
import {Text, View, Button, StatusBar, ScrollView } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';

import NavigationBar from './bizeUI/NavigationBar';
import { SafeAreaView } from 'react-native-safe-area-context';

function Home({navigation}) {
  return (
    <View style={{ display: 'flex', flex: 1 }}>
      <NavigationBar title="主页"></NavigationBar>
      <View
        style={{
          flex: 1,
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <ScrollView>
          <View>
          <Text>Home.</Text>
          <Button
            title="Go Settings"
            onPress={() => {navigation.push('Settings') }}></Button>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

function Settings({ navigation }) {
  return (
    <SafeAreaView style={{ display: 'flex', flex: 1 }}>
      <NavigationBar title="设置" navigation={navigation}></NavigationBar>
      <View
        style={{
          flex: 1,
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <ScrollView>
          <View>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Text>Settings.</Text>
          <Button
            title="Button"
            onPress={() => {
              navigation.goBack();
            }}></Button>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

function Feed() {
  return (
    <View
      style={{flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>
      <Text>Feed.</Text>
    </View>
  );
}

function Notifications() {
  return (
    <View
      style={{flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>
      <Text>Notifications.</Text>
    </View>
  );
}

const Stack = createStackNavigator();
function HomeTabs() {
  return (
    <Tab.Navigator screenOptions={{}}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}
const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;

const headerStyle = {
  headerStyle: {
    backgroundColor: '#fff',
    elevation: 0.5,
  },
  headerTitleStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },
  headerTitleContainerStyle: {
    left: TITLE_OFFSET,
    right: TITLE_OFFSET,
  },
};

const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <Stack.Screen
          options={{ ...headerStyle, }}
          name="Home"
          component={HomeTabs}
        />
        <Stack.Screen
          options={{ ...headerStyle, }}
          name="Settings"
          component={Settings}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
